<template>

  <section>
    <el-row>
      <!--搜索、创建行-->
      <el-col :span="20">
        <el-form :inline="true" size="small">
          <el-form-item label="查询医院" >
            <el-input placeholder="请输入" v-model="form.keyword" @keydown.native.prevent.enter="searchCompany"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" circle  @click="searchCompany"></el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-button style="margin-bottom: 20px;text-align: right" @click="creatHospital">
          <icon name="plus"></icon>
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <!--医院列表-->
      <el-table :data="hospitalList" style="width: 100%">
        <el-table-column type="index" width="30" >
        </el-table-column>
        <el-table-column label="医院" width="220">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="small" v-model="scope.row.name"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="所处公司" width="220">
          <template slot-scope="scope">

            <el-select v-show="scope.row.edit" v-model="scope.row.companyId" placeholder="请选择">
              <el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company.id"></el-option>
            </el-select>
            <!--<span  v-show="!scope.row.edit">{{scope.row.companyName}}</span>-->
            <span  v-show="!scope.row.edit">{{reCompanyName(scope.row.companyId)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" width="250">
          <template slot-scope="scope">
            <el-input  v-show="scope.row.edit" size="small" v-model="scope.row.contact"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.contact}}</span>
          </template>
        </el-table-column>

        <el-table-column label="地址" width="260">
          <template slot-scope="scope">
            <el-input  v-show="scope.row.edit" size="small" v-model="scope.row.address"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.address}}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" width="200">
          <template slot-scope="scope">
            <el-input  v-show="scope.row.edit" size="small" v-model="scope.row.phone"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.phone}}</span>
          </template>
        </el-table-column>
        <el-table-column label="部门类型" width="220">
          <template slot-scope="scope">
            <el-select v-show="scope.row.edit" v-model="scope.row.departmentTypeId" placeholder="请选择">
              <el-option v-for="departmentType in departmentTypeList" :key="departmentType.id" :label="departmentType.name" :value="departmentType.id"></el-option>
            </el-select>
            <span  v-show="!scope.row.edit">{{redepartmentTypeName(scope.row.departmentTypeId)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='del(scope)' size="small" >DEL</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </section>

</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
  import Vue from 'vue'//后续添加属性，需要vue联动

  export default {
    components: {ElInput},
    name:"hospital",

    data(){
      return {
        hospitalList:[],
        departmentTypeList:[],
        companies:[],
        creat:false,
        // companyId:'',
        form: {
          keyword: '',
        },
      }
    },
    computed:{
      ...mapGetters({

      }),
    },
    created(){
      //加载公司列表
      this.loadCompanyList()
      //加载部门类型列表
      this.loadDepartmentTypeList()
      //加载医院列表
      this.loadHospitalList()
    },
    methods:{
      ...mapActions({
        fetch:'fetch'
      }),
      reCompanyName(e){
        console.log('--------------------',e)
        if(e){
          return this.companies.find(i =>i.id == e).companyName
        }else {
          console.log('没e')
        }
      },
      redepartmentTypeName(){
        console.log('--------------------',e)
        if(e){
          return this.departmentTypeList.find(i =>i.id == e).name
        }else {
          console.log('没e')
        }
      },
      loadDepartmentTypeList(){
        this.fetch({name:"getDepartmentTypeList"})
          .then(res=>{
            if(res.errCode){
              this.$message({type:'error',message:res.errMsg})
            }else{
              console.log(res)
              this.departmentTypeList=res
            }
          })
          .catch(err=>{
            console.log(err)
            this.$message({type:'error',message:'服务器错误'})
          })
      },
      loadCompanyList(){
        //加载公司列表
        this.fetch({name:"getCompanyList"})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.companies = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },

      loadHospitalList(){
        //加载医院列表
        this.fetch({name:"getHospitalList"})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.hospitalList = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      searchCompany(){
        console.log('查找医院')
        console.log(this.form.keyword)
      },
      creatHospital(){
        console.log('添加新医院')
        let tb = {name: '',contact: '',address: '',phone: '',edit:true}
        this.hospitalList.push(tb)
      },

      confirm(row){
        //先判断编辑还是完成
        if(row.edit && row.edit === true){//目前是编辑状态
          //判断是否新创建
          if(row.id){//非新建，有id，要更新
            this.updateHospital(row)
          }
          else {//新建的，有edit
            //保存新
            this.saveHospital(row)
            row.edit = !row.edit
          }
        }else {
          //点击之前是非编辑状态，改成编辑状态
          if(row.edit === undefined){
            Vue.set(row,'edit',true)//后续添加属性，需要vue联动
          }else {
            row.edit = true
          }
        }
      },
      updateHospital(hospital){//更新医院
        console.log(hospital)
        this.fetch({name:"updateHospital",data:hospital})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              hospital.edit = false
              console.log(this.hospitalList)
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      saveHospital(hospital){
        this.fetch({name:"createHospital",data:hospital})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              hospital.id=res.id
              console.log(this.hospitalList)
              // this.hospitalList = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },

      del(e){//删除医院
        console.log(e)
        this.fetch({name:"delHospital",data:{id:e.row.id}})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.hospitalList.splice(e.$index,1)
              console.log(this.hospitalList)
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
    }

  }
</script>
